<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" >
      <el-form-item label="CAS编号" prop="casNo">
        <el-input v-model="queryParams.casNo" placeholder="请输入CAS编号" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="名称" prop="materialName">
        <el-input v-model="queryParams.materialName" placeholder="请输入危化品名称" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="类别" prop="hazardousOpt">
          <el-select v-model="queryParams.hazardousOpt" placeholder="请选择类别"  size="small">
            <el-option v-for="item in kindsOptions" :key="item.kindsId" :label="item.name" :value="item.kindsId">
          </el-option>
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="productCasList" >
      <el-table-column label="二维码"  prop="qrCode"  width="100" :show-overflow-tooltip="true">
         <template slot-scope="scope">
           <el-button type="text" @click="addQrCode(scope.row)" v-hasPermi="['labdata:chemicalUse:edit']">设置</el-button>
           {{scope.row.qrCode}}
         </template>
      </el-table-column>
      <el-table-column label="CAS编号"  prop="casNo" align="center" width="80"/>
      <el-table-column label="名称"  prop="materialName" :show-overflow-tooltip="true" />
      <el-table-column label="申购老师"  prop="applyTeacher" :show-overflow-tooltip="true" width="80"/>
      <el-table-column label="类别"  prop="hazardousOpt" :formatter="kindsFormat"  width="80" align="center"  />
      <el-table-column label="规格"  prop="model" width="100" align="center" :show-overflow-tooltip="true"/>
      <el-table-column label="单位"  prop="unitOpt" :formatter="unitOptFormat" width="60" align="center"/>
      <el-table-column label="包装"  prop="packageWeight" width="60" align="center"/>
      <el-table-column label="入库日期"  prop="storageTime" width="80">
      </el-table-column>
      <el-table-column label="剩余" v-if="!isHis" align="center" prop="inventoryNum" width="60"/>
      <el-table-column label="操作"  width="60" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUse(scope.row)"
            v-hasPermi="['labdata:chemicalUse:edit']">管理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <ChemicalUse ref="chemical" @refresh="getList"></ChemicalUse>
    <el-dialog title="设置二维码" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
       <el-form-item label="CAS编号" prop="casNo">
         <span v-text="form.casNo"></span>
       </el-form-item>
       <el-form-item label="名称" prop="materialName">
         <span v-text="form.materialName"></span>
       </el-form-item>
       <el-form-item label="二维码" prop="qrCode">
         <el-input  placeholder="请输入二维码" size="small"  v-model="form.qrCode" />
       </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listHistory,listCurrent,updateProductCas
  } from "@/api/labbase/product_cas.js";
import {
    getCasTypeByNo
  } from "@/api/labdata/casType";
import {getAllRestrictedKinds} from "@/api/labdata/cylindersType";
import ChemicalUse from "@/views/labbase/chemicalUse/index.vue";
  export default {
    name: "ProductCas",
    components:{ChemicalUse},
    data() {
      return {
        open:false,
        // 遮罩层
        loading: true,
        // 总条数
        total: 0,
        // 在用化学品表格数据
        productCasList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 类别字典
        kindsOptions: [],
        // 单位字典
        unitOptOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          caseNo: null,
          materialName: null,
          hazardousOpt: null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          qrCode: [
            { required: true, message: "二维码不能为空", trigger: "blur" }
          ],
        }
      };
    },
    props: {
      orgId: Number,
      isHis:Boolean,
    },
    watch: {
      orgId(val) {
        this.queryParams.OrgId = val;
        this.getList();
      },
    },
    created() {
      //console.log("isHis:"+this.isHis);
      this.getAllKinds();
      this.getList();
      this.getDicts("unitOpt").then(response => {
        this.unitOptOptions = response.data;
      });
    },
    methods: {
      /** 查询在用化学品列表 */
      getList() {
        this.loading = true;
        if(this.isHis){
          listHistory(this.queryParams).then(response => {
            this.productCasList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        }else{
          listCurrent(this.queryParams).then(response => {
            this.productCasList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        }

      },
      getAllKinds(){
        getAllRestrictedKinds().then(response => {
          this.kindsOptions = response.data;
        });
      },
      // 类别字典翻译
      kindsFormat(row, column){
        for(let i=0; i<this.kindsOptions.length;i++){
          if(this.kindsOptions[i].kindsId == row.hazardousOpt){
            return this.kindsOptions[i].name;
          }
        }
        return '';
      },
      // 单位字典翻译
      unitOptFormat(row, column) {
        return this.selectDictLabel(this.unitOptOptions, row.unitOpt);
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
     /** 修改按钮操作 */
     handleUse(row) {
       let unitName = this.selectDictLabel(this.unitOptOptions, row.unitOpt);
       row.unitName = unitName;
       row.isHis = this.isHis;
       //console.log('row.unitName='+unitName);
       this.$refs["chemical"].openUseEdit(row);
     },

     addQrCode(row){
       this.form = row;
       this.open = true;
     },
     cancel(){
       this.form = {};
       this.open = false;
     },
     submitForm(){
        updateProductCas(this.form).then(response=>{
          this.open=false;
        });
     },
    }
  };
</script>
<style type="text/css" scoped>
 .input_cas{
   width:400px;
 }
</style>
